<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import api from '@/apis'
import tg from '@/assets/icon/public/tg.png'
import x from '@/assets/icon/public/x.png'
const { t } = useI18n()
let links = ref([
  {
    icon: tg,
    link: ''
  },
  {
    icon: x,
    link: ''
  }
])

const roadList = ref([
  {
    date: '2025.11',
    contet: ['DAPP推出，开启BTCM代币挖矿，全球节点联盟开放']
  },
  {
    date: '2026 Q1',
    contet: ['BTCM 上线币安Alpha、增加多链通道']
  },
  {
    date: '2026 Q3',
    contet: ['布局全球30个国家']
  },
  {
    date: '2026 Q4',
    contet: ['逐步开展与币安百家优质代币生态开展合作', '登陆币安现货交易对']
  },
  {
    date: '2028 Q4',
    contet: ['BTCM代币，拟登陆纳斯达克/港交所，实现算力收益（百倍增值）']
  }
])
</script>
<template>
  <div class="container">
    <div class="top_bg absolute top-0 left-0 w-full h-[1528px]"></div>
    <!-- 第一板块 -->
    <div class="relative z-1 pt-12px">
      <div class="flex flex-col items-center px-36px">
        <img src="/src/assets/imgs/home/top_title.png" class="w-450 h-128" alt="" />
        <div class="mt-30px text-des">全球首个 Web3×AI 云算力集成平台</div>
        <div
          class="text-[#fff] text-26px font-pingfang font-400 line-height-46px text-center mt-22px"
          style="text-indent: 2em"
        >
          BitMiner（比特矿工） 是由<span class="text-[#FFBB29]">币安实验室</span>（Binance
          Labs）、<span class="text-[#FFBB29]">BTG公链基金</span>（BTG Chain Lab）
          联合币安百家优质公链平台，及多家全球顶级算力中心机构、美国Riot Platforms比特币矿场、共同
          发起的 WEB3+AI云算力于一体的创新算力挖矿平台
        </div>
        <div
          class="border-solid border-[#fff]/12 border-[1px] w-100% px-42px py-26 rounded-[40px] flex items-center gap-86px mt-26px"
        >
          <div class="w-33%">
            <div class="text-[#fff] text-36px font-roboto font-700">200+</div>
            <div class="text-[#fff]/50 text-26px font-pingfang font-400 mt-8px">招募节点</div>
          </div>
          <div class="w-33%">
            <div class="text-[#fff] text-36px font-roboto font-700">50K+</div>
            <div class="text-[#fff]/50 text-26px font-pingfang font-400 mt-8px">总池数量</div>
          </div>
          <div class="w-33%">
            <div class="text-[#fff] text-36px font-roboto font-700">30T+</div>
            <div class="text-[#fff]/50 text-26px font-pingfang font-400 mt-8px">算力</div>
          </div>
        </div>
        <div
          class="w-100% h-90px btnstyle flex items-center justify-center mt-36px van-haptics-feedback"
        >
          <div class="text-[#2A1700] text-[34px] font-Alibaba font-700 line-height-48px">
            节点招募
          </div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 48 48"
            fill="none"
          >
            <path
              d="M38.3281 24.0001L25.9141 11.5861L23.0861 14.4141L32.6721 24.0001L23.0861 33.5861L25.9141 36.4141L38.3281 24.0001ZM27.0281 24.0001L14.6141 11.5861L11.7861 14.4141L21.3721 24.0001L11.7861 33.5861L14.6141 36.4141L27.0281 24.0001Z"
              fill="url(#paint0_linear_1_659)"
            />
            <defs>
              <linearGradient
                id="paint0_linear_1_659"
                x1="43.0002"
                y1="26.0001"
                x2="10.0002"
                y2="26.0001"
                gradientUnits="userSpaceOnUse"
              >
                <stop />
                <stop offset="1" stop-opacity="0" />
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>
      <img src="/src/assets/imgs/home/btcm.png" class="w-100%" alt="" />
    </div>
    <!-- 关于BitMiner -->
    <div class="px-36px mt-94px">
      <div class="text-[#fff] text-[68px] line-height-[80px] font-source font-900">
        关于<span class="text-[#FFBB29]">BitMiner</span>
      </div>
      <div class="flex flex-col items-center gap-44px mt-28px">
        <div class="w-100%">
          <div class="flex items-center gap-26px line-height-86px">
            <div class="text-[#fff]/60 text-[56px] font-pingfang font-400">01/</div>
            <div class="text-[#fff] text-[36px] font-pingfang font-600">BitMiner愿景</div>
          </div>
          <div class="text-[#fff] text-[26px] font-source font-500 line-height-40px mt-14px">
            BitMiner（比特矿工） 的诞生，是为了打破全球算力资源被
            少数科技巨头垄断、分配失衡的格局。它让原本闲置个人算 力资产 被重新激活，并通过
            AI智能调度系统 实现全球范围 内的高效整合与统一调用。
          </div>
          <img src="/src/assets/imgs/home/detail1.png" class="w-100% mt-22px" alt="" />
        </div>
        <div class="w-100%">
          <div class="flex items-center gap-26px line-height-86px">
            <div class="text-[#fff]/60 text-[56px] font-pingfang font-400">02/</div>
            <div class="text-[#fff] text-[36px] font-pingfang font-600">代币意义与设计</div>
          </div>
          <div class="text-[#E7EFF1] text-[26px] font-source font-500 line-height-40px mt-14px">
            • 总发行量：1,000,000 枚 TCM <br />• 分配机制：30 万枚 BTCM 是 BitMiner<br />
            平台的平台代币，也是全球首个以算 力挖矿收益为底层锚定的 RWA上链资产代币。
          </div>
          <img src="/src/assets/imgs/home/detail2.png" class="w-100% mt-22px" alt="" />
        </div>
        <div class="w-100%">
          <div class="flex items-center gap-26px line-height-86px">
            <div class="text-[#fff]/60 text-[56px] font-pingfang font-400">03/</div>
            <div class="text-[#fff] text-[36px] font-pingfang font-600">Web3时代的英伟达</div>
          </div>
          <div class="text-[#E7EFF1] text-[26px] font-source font-500 line-height-40px mt-14px">
            聚合全球闲置AI算力、释放AI算力价值，让每个人都能 参与挖矿、共享收益。 B
            端：为AI企业、公链节点、科研机构提供弹性算力服务 C
            端：为全球去中心化用户提供闲置AI算力增值路径。
            资本市场：通过资产代币化，实现算力收益分红与 全球市场价值百倍赋能
          </div>
          <img src="/src/assets/imgs/home/detail3.png" class="w-100% mt-22px" alt="" />
        </div>
      </div>
    </div>
    <!-- BitMiner优势亮点 -->
    <div class="mt-130px pt-90px relative">
      <div class="w-100% h-782px bg-[#FFFFFF1A] absolute top-0 left-0 bottom_img"></div>
      <div class="relative z-1 px-30">
        <div
          class="text-[#fff] text-[68px] line-height-[80px] font-source font-900 flex items-center justify-center"
        >
          <span class="text-[#FFBB29]">BitMiner</span>优势亮点
        </div>
        <div
          class="text-[#ccc] text-[32px] font-roboto line-height-50px font-200 uppercase mt-162px"
        >
          Marketing and <br />
          community building
        </div>
        <div class="flex flex-col gap-40px mt-250px">
          <div>
            <div class="text">打破算力垄断+ 多链流通</div>
            <div class="flex mt-24px">
              <div class="pt-10px">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="8"
                  height="8"
                  viewBox="0 0 16 16"
                  fill="none"
                >
                  <circle cx="8" cy="8" r="8" fill="#FFBB29" />
                </svg>
              </div>
              <div class="text-[#FFFFFF] text-[26px] font-source font-400 line-height-40px ml-16">
                用户授权平台AI调用自己设备 （GPU闲置算力）AI自动调度后，
                用户即可获得挖矿代币奖励（首期 产出 BTCM 平台代币，未来还将陆
                续解锁更多优质代币挖矿板块）
              </div>
            </div>
          </div>
          <div>
            <div class="text">全链路配套 + 双向连接</div>
            <div class="flex mt-24px">
              <div class="pt-10px">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="8"
                  height="8"
                  viewBox="0 0 16 16"
                  fill="none"
                >
                  <circle cx="8" cy="8" r="8" fill="#FFBB29" />
                </svg>
              </div>
              <div class="text-[#FFFFFF] text-[26px] font-source font-400 line-height-40px ml-16">
                平台整合闲置AI算力资源，为 AI企 业、公链节点、科研机构 提供弹性 算力服务，并通过
                RWA上链资产将 算力收益转化为可流通的代币资产奖 励给矿工。
              </div>
            </div>
          </div>
        </div>
        <div class="mt-100px join py-30px px-32px flex items-center justify-between">
          <div class="text-[#fff] text-[28px] font-roboto line-height-34px font-700">加入我们<br />ALPACADB</div>
          <div class="flex items-center justify-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 32 32"
              fill="none"
            >
              <g clip-path="url(#clip0_1_185)">
                <path
                  d="M1.64975 31.9996C1.22748 31.9996 0.805632 31.8384 0.483575 31.5163C-0.160541 30.8722 -0.160541 29.8277 0.483575 29.1835L26.3682 3.29893H5.60846C4.69754 3.29893 3.95899 2.56038 3.95899 1.64946C3.95899 0.738547 4.69754 0 5.60846 0H30.3384C30.3809 0 30.4234 0.000824719 30.4663 0.00412366C30.8024 0.0272162 31.1104 0.151338 31.3607 0.345563C31.4448 0.410831 31.5224 0.484018 31.5925 0.564116C31.5925 0.564116 31.5925 0.564529 31.5929 0.564941C31.844 0.852772 31.997 1.22803 31.9995 1.63957C32.0019 2.05111 31.9995 1.64163 31.9995 1.64245V26.3914C31.9995 27.3023 31.2609 28.0409 30.35 28.0409C29.4391 28.0409 28.7005 27.3023 28.7005 26.3914V5.63168L2.81592 31.5167C2.49386 31.8388 2.0716 32 1.64975 32V31.9996Z"
                  fill="white"
                />
              </g>
              <defs>
                <clipPath id="clip0_1_185">
                  <rect width="32" height="32" fill="white" />
                </clipPath>
              </defs>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <!-- BitMiner路线图 -->
    <div class="px-30 mt-134px">
      <div
        class="text-[#fff] text-[68px] line-height-[80px] font-source font-900 flex items-center justify-center"
      >
        <span class="text-[#FFBB29]">BitMiner</span>路线图
      </div>
      <div class="flex flex-col gap-30px">
        <div
          class="border-solid border-[#FFFFFF1A] border-[1px] rounded-[30px] p-34px bg-[#201E1D8F]"
          v-for="(value,index) in roadList"
          :key="index"
        >
        <div class="">{{ value.date }}</div>
        <ul class='text-[#fff] list-style-type-disc'>
          <li v-for="item in value.contet" :key="item" class="text-[26px] font-source font-400 line-height-40px">{{ item }}</li>
        </ul>
      </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.van-hairline--surround {
  padding: 6px 10px;
  border-radius: 6px;
}

.container {
  width: 100%;
  min-height: 100vh;
  background: #160f00;
  position: relative;

  // padding-top: calc(220px / 2);
  // height: 100vh;
  // display: flex;
  // flex-direction: column;
  // background-color: #f5f5f5;
}
.top_bg {
  margin-top: -80px;
  background: url('/src/assets/imgs/home/top_bg.png') no-repeat;
  background-size: 100% 100%;
}
.text-des {
  font-family: 'Source Han Sans CN';
  font-size: 38px;
  font-style: normal;
  font-weight: 900;
  line-height: 44px; /* 115.789% */
  background: var(--11, linear-gradient(180deg, #fad933 14.29%, #efac40 47.91%, #95600f 79.05%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btnstyle {
  border-radius: 198px;
  background: linear-gradient(180deg, #fad933 0%, #efac40 51.92%, #95600f 100%);
  box-shadow: 0 16px 40px 0 rgba(0, 0, 0, 0.3), 0 0 8px 0 rgba(255, 255, 255, 0.25) inset;
}
.bottom_img {
  background: url('/src/assets/imgs/home/bottom_img.png') no-repeat;
  background-size: 100% 100%;
}
.text {
  font-family: Roboto;
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: 50px; /* 138.889% */
  text-transform: uppercase;
  background: var(--11, linear-gradient(180deg, #fad933 14.29%, #efac40 47.91%, #95600f 79.05%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.join {
  border-radius: 4px;
  background: var(--Linear, linear-gradient(90deg, #1d140a 0%, #6e471e 100%));
}
</style>
